<template>
	<view class="container">
		<view style="padding: 5rpx;">
			<u-search :showAction="true" shape="square" actionText="搜索" :animation="true" v-model="queryParams.cusName"
				@search="search" :clearabled="true">
			</u-search>
		</view>
		<view class="search-result">
			<u-list @scrolltolower="getMore()">
				<u-list-item v-for="(item, index) in customerList" :key="index">
					<u-cell-group>
						<u-cell :title="item.cusName" :label="item.cusAddress" :scrollTop="scrollTop" isLink
							:url="jumpToDetail(item.id)">
							<u-avatar slot="icon" shape="square" size="35"
								src="https://cdn.uviewui.com/uview/album/1.jpg" customStyle="margin: -3px 5px -3px 0">
							</u-avatar>
						</u-cell>
					</u-cell-group>
				</u-list-item>
			</u-list>
		</view>
		<!--悬浮按钮，新增客户-->
		<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@fabClick="addCustomer" />
		<!--触底加载数据-->
		<!-- <view v-show="isLoadMore">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view> -->
	</view>
</template>

<script>
	import {
		listCustomer
	} from "@/api/crm/customer";
	export default {
		data() {
			return {
				customerList: [],
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				scrollTop: 0,
				isRefresh: false,
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#007AFF',
					iconColor: '#fff'
				},
				is_color_type: false,
				loadStatus: 'loadmore', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderByColumn: "cusSn",
					isAsc: "desc",
					cusName: undefined,
				},
			}
		},
		onShow() {
			// 回退到本页面的时候，刷新页面
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.$vm.isRefresh) {
				this.queryParams.pageNum = 1;
				this.customerList = [];
				this.getCustomerList();
			}
		},
		onLoad() {
			this.customerList = [];
			this.getCustomerList();
		},

		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.queryParams.pageNum += 1;
				this.getCustomerList();
			}
		},
		onBackPress() {
			if (this.$refs.fab.isShow) {
				this.$refs.fab.close();
				return true;
			}
			return false;
		},
		methods: {
			// 获取客户分页数据
			getCustomerList() {
				listCustomer(this.queryParams).then(response => {
					if (response.rows) {
						if (response.rows.length < this.queryParams.pageSize) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
							this.isLoadMore = true;
							this.loadStatus = 'nomore';
						} else {
							this.isLoadMore = false;
							this.loadStatus = 'loading';
						}
						this.customerList = [...this.customerList, ...response.rows];
					} else {
						this.isLoadMore = true;
						this.loadStatus = 'nomore';
					}
				});
			},
			// 转到客户详情
			jumpToDetail(id){
				let url="/pages/crm/customer/detail?id="+id;
				return url;
			},
			// 打开新增客户页面
			addCustomer() {
				uni.navigateTo({
					url: '/pages/crm/customer/new'
				})
			},
			// 搜索函数
			search(res) {
				this.queryParams.pageNum = 1;
				this.customerList = [];
				this.getCustomerList();
			},
			// 触底加载更多
			getMore() {
				if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
					this.queryParams.pageNum += 1;
					this.getCustomerList();
				}
			}
		}
	}
</script>

<style>

</style>
